body{
    margin: 0;
    width: 100vw;/*100vh代表的是占整个屏幕的比例为100%，100%代表的是占父容器的比例*/
    height: 100vh;

    /*第二种居中方式：弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;

    /*第一种居中方式：使用position属性*/
    /* position:relative; */

    background:#65de01;

}

.droplet{
    width: 150px;
    height: 190px;
    background-color: #efea63;
    border-radius: 50%;
    box-shadow:inset 6px 42px 20px #8ad000,inset 18px 89px 12px #dce72c,
    12px 18px 17px  ;/*加inset代表内部阴影*/
    position: relative;
}
.droplet::before{/*伪元素如果不给出具体内容将不会显示在页面上*/
    content: '';/*使用伪元素必要的属性，设置此属性后伪元素才能显示*/
    width: 30px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);

    transform: rotate(-30deg);

    position: absolute;
    left: 40px;
    top: 15px;
}
.droplet::after{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);

    position: absolute;
    left: 30px;
    top: 30px;
}